<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<!--<span th:text="${errorMsg}"></span>-->
<!--<span th:if="${session.loginUser}" th:text="${session.loginUser.username}"></span>-->

    <form id="registerForm">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br>
        <button type="submit">Register</button>
    </form>
<p class="msg"></p>



</body>

<script>
    const registerForm = document.getElementById('registerForm');
    registerForm.addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止默认的表单提交行为
        var formData = new FormData(this);  //当表单提交时，会创建一个 FormData 对象，其中包含了表单中的所有字段及其对应的值。
        fetch('/register', {
            method: 'POST',
            body: formData
        })
            .then(response => {       //只有当响应的状态是200-299 ，该属性才会被设置为true
                if(response.ok){
                    //这里可以处理用户注册成功的逻辑
                   return response.text()
                }else{
                    //这里可以处理用户注册失败的逻辑
                }
            })
            //第一个then返回的是一个promise对象
            // 这里指response.text，虽然它是一个纯文本
            .then(data => {
                console.log(data);
                if(data==='注册成功'){
                    window.location.href = 'http://localhost:8080/success';
                }else{
                    document.querySelector(".msg").innerHTML=data;
                }
            })
            .catch(error => console.error('Error registering user:', error));
    });



</script>

</html>